<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03attribute变量</title>
    <script src="test.js"></script>
  </head>
  <body>
    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
    <script>
      // 1.获取webgl对象
      var canvas = document.getElementById('webgl')
      var gl = canvas.getContext('webgl')
      // 2.设置顶点着色器和片元着色器
      var vsSource = `
       attribute vec4 aPosition;
      void main(){
        gl_Position =aPosition;
        gl_PointSize=20.0;
      }`
      var fsSource = `void main(){
       gl_FragColor = vec4(1.0,2.0,0.0,3.0);

}`
      // 3.初始化编辑器
      // initShader函数实现

      const program = initShader(gl, vsSource, fsSource)
      gl.useProgram(program)
      const aPosition = gl.getAttribLocation(program, 'aPosition')

      //   4.绘制一个点
      let x = 0
      setInterval(() => {
        x += 0.1
        if (x > 1.0) {
          x = 0
        }
        // 给 attribute 变量赋值
        gl.vertexAttrib1f(aPosition, x)

        // 执行绘制
        gl.drawArrays(gl.POINTS, 0, 1)
      }, 200)
    </script>
  </body>
</html>
